<template>

  <div>
    <gallery :images="images" :index="index" @close="index = null"></gallery>
    <div class="image" v-for="(image, imageIndex) in images" :key="imageIndex" @click="index = imageIndex" :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"></div>
  </div>
</template>
<script>
import { defineComponent, ref, reactive } from 'vue'
import { Popup } from "vant";
import VueGallery from 'vue-gallery';
export default defineComponent({
  components: {
    Popup,
    'gallery': VueGallery
  },
  setup() {
    const giftShow = ref(false)

    const images = reactive(
      [
        {
          title: 'Fruits',
          type: 'video/mp4',
          href: 'https://example.org/videos/fruits.mp4',
          poster: 'https://example.org/images/fruits.jpg'
        },
        {
          title: 'Banana',
          type: 'image/jpeg',
          href: 'https://example.org/images/banana.jpg',
          thumbnail: 'https://example.org/thumbnails/banana.jpg'
        }
      ]
    )

    return {
      index: null,
      images,
      giftShow
    }
  }
})
</script> 
<style lang="less" scoped>
.image {
  float: left;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  border: 1px solid #ebebeb;
  margin: 5px;
}
</style>